<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>课工场论坛列表</title>
    <link href="css/bbs.css" rel="stylesheet">
</head>
<body>
<div class="bbs">
    <header><span onclick="fa()">我要发帖</span></header>
    <section>
        <!-- 帖子列表 -->
        <ul>
            <li>
                <div>
                    <img src="./images/tou01.jpg" alt="">
                </div>

                <h1>如何学习web前端开发课程</h1>

                <p>模块：新课来了
                    <span>发表时间:2024-04-23</span>
                </p>
            </li>
        </ul>
    </section>
    <div class="post">
        <input class="title" placeholder="请输入标题（1-50个字符）">
        所属版块：<select><option>请选择版块</option><option>电子书籍</option><option>新课来了</option><option>新手报到</option><option>职业规划</option></select>
        <textarea class="content"></textarea>
        <input class="btn" onclick="publish()" value="发布">
    </div>
</div>
<script>
    function fa(){
        // 通过类属性 获取元素，下标0代表第一个元素
        document.getElementsByClassName("post")[0].style.display = "block";  // 隐藏是none
        // 清空上一次数据
        document.getElementsByClassName("title")[0].value = "";
        document.getElementsByTagName("select")[0].value = -1; // 下拉列表
        document.getElementsByClassName("content")[0].value = "";
    }

    //头像数组  4个长度
    var arr = new Array();
    arr[0] = "tou01.jpg";
    arr[1] = "tou02.jpg";
    arr[2] = "tou03.jpg";
    arr[3] = "tou04.jpg";


    // 发布
    function publish(){
        // 头像  随机产生
        // 把头像路径存储在数组中，随机产生数组下标
        // 获取随机数，范围在0-3
        var index = Math.floor(Math.random()*4);  // 3.99999999
        // console.log(index);
        // arr[index];

        // 创建图片节点
        var el_img = document.createElement("img");
        el_img.setAttribute("src","./images/"+arr[index]);

        // 创建图片外层的div节点
        var el_div = document.createElement("div");
        // 将图片节点插入到div节点中
        el_div.appendChild(el_img);

        // 处理帖子的标题
        // 先获取标题
        var title = document.getElementsByClassName("title")[0].value;

        // 创建标题节点
        var el_title = document.createElement("h1");
        el_title.innerHTML = title; // 给标题填充内容
        // 创建帖子的模块和时间
        var mokuai = document.getElementsByTagName("select")[0].value;
        var date = new Date();
        // 创建span节点和p节点
        var el_span = document.createElement("span");
        var el_p = document.createElement("p");
        el_span.innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;发表时间:"+date.toLocaleString(); // 时间格式化函数
        el_p.innerHTML = "模块:" + mokuai;
        // 将span追加到p标签中
        el_p.appendChild(el_span);

        // 创建li节点
        var el_li = document.createElement("li");
        // 将div节点追加到li节点中
        el_li.appendChild(el_div);
        // 将h1节点 追加到li中
        el_li.appendChild(el_title);
        // 将p节点追加到li中
        el_li.appendChild(el_p);
        // 后置追加
        // document.getElementsByTagName("ul")[0].appendChild(el_li);
        // 前置插入insertBefore(A,B)   b要获取第一个li
        var el_li_first = document.getElementsByTagName("ul")[0].firstElementChild;
        document.getElementsByTagName("ul")[0].insertBefore(el_li,el_li_first);
        // 把发帖弹框关闭
        document.getElementsByClassName("post")[0].style.display = "none";
    }


</script>
</body>
</html>